<script setup lang="ts">
import LoginLayout from '@/components/login-layout.vue'

import Form from './form.vue'

const { push } = useRouter()

function goToLogin() {
    push('/login')
}
</script>

<template>
    <LoginLayout>
        <div class="forget-form">
            <div class="form-container">
                <div class="form-content">
                    <Form />

                    <div class="tip"
                         @click="goToLogin"
                    >
                        已有账号？马上登录
                    </div>
                </div>
            </div>
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}

.forget-form {
    width: toVw(480);
    height: toVh(658);
    background: #fff;
    margin-left: toVw(174);
    // margin-top: toVh(58);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    .form-container {
        width: calc(100% - toVw(80));
        overflow-y: auto;
        .form-content {
            margin-top: toVh(30);
            .tip {
                text-align: center;
                font-size: 14px;
                color: #da0004;
                font-weight: 600;
                cursor: pointer;
                margin-top: toVh(30);
                margin-bottom: toVh(30);
            }
        }
    }
}
</style>
